<template>
  <div class="app-container">
    <main-panel>
      <div class="right">
        <el-button
          size="small"
          type="success"
          icon="el-icon-plus"
          @click="openAddDialog"
          >新增快递100账号</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="handleEdit"
          >修改账号</el-button
        >
        <div class="marginLeft10">
          <el-popconfirm title="确定删除账号？" @onConfirm="removeAccount">
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              slot="reference"
              class="search"
              >删除账号</el-button
            >
          </el-popconfirm>
        </div>
      </div>
    </main-panel>
    <div class="source">
      <el-table
        :data="list"
        v-loading.body="listLoading"
        element-loading-text="Loading"
        highlight-current-row
        size="small"
        style="width: 100%"
        max-height="450"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="名称" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="快递100账号">
          <template slot-scope="scope">
            {{ scope.row.account }}
          </template>
        </el-table-column>
        <el-table-column label="Key" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.key }}
          </template>
        </el-table-column>
        <el-table-column label="Secret" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.secret }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="active_value"
              :inactive-value="inactive_value"
              @change="changeStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-priority
      :editDialog.sync="editDialog"
      :info="info"
      @updateList="showDateList"
    ></edit-priority>
    <add-priority :addDialog.sync="addDialog"></add-priority>
  </div>
</template>

<script>
import { MainPanel } from '@/components'
import addPriority from '@/views/priority/add.vue'
import editPriority from '@/views/priority/edit.vue'
import { getList, edit, handDelete } from '@/api/express'
export default {
  data() {
    return {
      editId: -1,
      listLoading: true,
      addDialog: false, // 新增
      editDialog: false,
      saveLoading: false,
      active_value: 1,
      inactive_value: 0,
      list: [],
      multipleSelection: [],
      info: {}
    }
  },
  created() {
    this.fecthData()
  },
  components: {
    MainPanel,
    addPriority,
    editPriority
  },
  methods: {
    fecthData() {
      getList().then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleEdit() {
      const lists = this.multipleSelection
      if (lists.length > 1) {
        this.$message.error('只能选择一条数据修改')
      } else if (lists.length === 1) {
        this.$set(this.info, 'info', lists[0])
        this.editDialog = true
      } else {
        this.$message.error('未选择数据')
      }
    },
    openAddDialog() {
      this.addDialog = true
    },
    removeAccount() {
      const lists = this.multipleSelection
      const that = this
      if (lists.length > 1) {
        this.$message.error('只能选择一条数据修改')
      } else if (lists.length === 1) {
        const index = this.list.findIndex((v) => v.id === lists[0].id)
        handDelete(lists[0])
          .then((res) => {
            that.list.splice(index, 1)
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
          .catch((res) => {})
      } else {
        this.$message.error('未选择数据')
      }
    },
    changeStatus(e) {
      edit(e)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
        .catch(() => {})
    },
    showDateList(val) {
      const index = this.list.findIndex((v) => v.id === val.id)
      if (index >= 0) {
        this.$set(this.list, index, val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.source {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
}
.table {
  width: 100%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
.search-form {
  width: 100%;
  .el-input {
    width: 80%;
  }
  .el-select {
    width: 80%;
    .el-option {
      width: 100%;
    }
  }
  .search {
    width: 100%;
  }
  .line {
    text-align: center;
  }
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.marginLeft10 {
  margin-left: 10px;
  display: inline;
  text-align: right;
}
</style>
